<?php if (!defined('THINK_PATH')) exit();?><!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="UTF-8">
	<title>CRM客户关系管理</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
 	<!-- <link rel="stylesheet" href="/gaoa/Public/css/global.css" media="all"> -->
	<!--<link rel="stylesheet" href="/gaoa/Public/plugins/font-awesome/css/font-awesome.min.css"> -->

	<link rel="stylesheet" href="/gaoa/Public/css/element-ui--index.css">


	<style>
	    *{
	    	font-family: microsoft YaHei;
	    }
		.pull-left {
			float: left;
		}
		.pull-right {
			float: right;
		}
		.container {
			padding: 2px;
		}
		.container > .wrapp >  .el-row {
			margin-bottom: 10px;
		}
		.el-form--inline .el-form-item {
			margin-bottom: 0px;
		}
/*		#app>.wrapp{
			display: none;
		}*/
		
		/*表格条纹样式*/
		.el-table .info-row {
		background: #ffffff;
		}

		.el-table .positive-row {
		background: #c9e5f5;
		}
		.cell img{
			vertical-align: middle;
		}
		
		.el-date-editor.el-input{
			width: 100%;
			max-width: 170px;
		}

		.el-table__body tr.current-row>td{
	      background: rgba(157, 195, 232, 0.7) !important;
	  }

    @media screen and (min-width:1165px) and (max-width:1200px){
      .el-dialog--small {
          width: 70%;
      }
    }

    @media only screen and (max-width:1164px){
      .el-dialog--small {
          width: 85%;
      }
    }  		
	</style>
	<!-- 如果没有 则 提供一些高级的js功能  -->
	<script src="/gaoa/Public/js/advancejs.js"></script>
	<!-- 不支持IE9 及以下的浏览器 -->
	<!--[if lte IE 9]> 
	<script>
		window.location.href="<?php echo U('login/notsupport');?>";
	</script>
	<![endif]-->
	
  <style>
    .el-tabs__header{
      border-top:2px solid #ea4b4b;
      border-bottom: 1px solid #c51f1f;
    }
    .el-dialog .el-tabs__header{
      border-top:none;
    }
    .el-tabs--border-card .el-tabs__item{
      border-left: none;
    }
    .el-tabs--border-card>.el-tabs__header .el-tabs__item.is-active {
      border-left-color: #d1dbe5;  
      border-right-color: #d3dce6;
      background: #544b8f;
      color: #fff;
    }
    .el-tabs--border-card .el-tabs__header {
      background-color: #fff;
      margin: 0;
    }
    .container > .wrapp > .a > .el-row {
      margin-bottom: 6px;
    }
    .el-tabs--border-card .el-tabs__content{
      padding:0 9px 5px 9px;
    }
    .el-card, .el-menu--horizontal .el-submenu>.el-menu, .el-tabs--border-card{
      box-shadow: none;
    }
    .el-tabs--border-card{
      border: none;
    }
    .el-tabs__item{
    	font-family: Microsoft YaHei;
    	color:#0d0f10;
    	font-size: 14px;
    }
    .el-dialog__body{
      color: rgb(72, 87, 106);
      font-size: 14px;
      /*padding: 30px 20px;*/
      padding: 30px 20px 6px 20px;
    }
  </style>

</head>
<body>
	
	
	<div id="app" class="container">
		<div class="wrapp" v-show="show" style="display:none;">
			<div class="a">
				<el-row>
        	<el-col :span="24">
          	<el-form :inline="true" ref="searchForm" :model="searchForm">
			  		  <el-form-item>
	              <el-select size="small" style="width:150px;" v-model="searchForm.type" 
                  placeholder="所属分类">
                  <el-option v-for="item in StyType" :label="item.label" :value="item.value"></el-option>
	              </el-select>
			  		  </el-form-item>

			  		  <el-form-item prop="name" style="width:150px">
			  		    <el-input v-model="searchForm.name" size="small" placeholder="用品名称"></el-input>
			  		  </el-form-item>

	            <el-form-item prop="start">
                <el-date-picker size="small" v-model="searchForm.start" 
                  placeholder="选择开始日期" 
                  @change="startDateChange">
                </el-date-picker>
	            </el-form-item>
	            <el-form-item prop="end">
                <el-date-picker size="small"
                  v-model="searchForm.end" 
                  placeholder="选择截止日期" 
                  @change="endDateChange">
                </el-date-picker>
	            </el-form-item>

	            <el-form-item>
	              <el-tooltip content="填写或者选择好筛选条件后点击此按钮" placement="bottom-start">
	                <el-button type="info" size="small" icon="search" @click="loadDatalist">查询</el-button>
	              </el-tooltip> 
	            </el-form-item>
             
              <el-form-item>
	              <el-tooltip content="清空搜索框并刷新表格数据" placement="bottom-start">
	                <el-button size="small" @click="searchReset">重置</el-button>
	              </el-tooltip>
              </el-form-item>

	            <el-form-item>
	              <el-tooltip content="点击刷新当前页面" placement="right">
	                <el-button @click="refresh" size="small" type="danger">刷新</el-button>
	              </el-tooltip>
	            </el-form-item>

            </el-form>
          </el-col>
			  </el-row>

			  <el-row>
        	<el-col :span="24">
	          <el-table v-loading="dataLoad" :data="dataList"
                @row-dblclick = "showInfo"
                @row-click = "showRowInfo"
	              element-loading-text="<?php echo L('DATA_LOGIN');?>"
	              empty-text="暂无数据,销售妹子正在努力中！"
	              highlight-current-row ref="select" >

			  	    <el-table-column label="<?php echo L('INDEX');?>" type="index" width="65" >
			  	    </el-table-column>

              <el-table-column  align="center" prop="name" label="品名" show-overflow-tooltip>
              </el-table-column>

              <el-table-column  align="center" prop="type" label="类别">
              </el-table-column>

              <el-table-column  align="center" prop="spec" label="规格"  show-overflow-tooltip>
              </el-table-column>

              <el-table-column  align="center" prop="unit" label="单位">
              </el-table-column>

              <el-table-column  align="center" prop="price" label="单价(元)">
              </el-table-column>

              <el-table-column  align="center" prop="start_num" label="起始数量">
              </el-table-column>

              <el-table-column  align="center" prop="end_num" label="截止数量">
              </el-table-column>

              <el-table-column  align="center" prop="now_num" label="目前数量">
              </el-table-column>

              <el-table-column  align="center" prop="total_value" label="总价值">
              </el-table-column> 

	            <el-table-column  align="center" prop="use_num" label="领用数">
	            </el-table-column>

              <el-table-column  align="center" prop="repair_num" label="报修数">
              </el-table-column>

			  	    <el-table-column  align="center" prop="scrap_num" label="报废数">
			  	    </el-table-column>

			        <el-table-column align="center" prop="remark" label="备注" show-overflow-tooltip>
              </el-table-column>
	          </el-table>
          </el-col>
			  </el-row>

			  <el-row>
			  	<el-col :span="12">
			      <div class="grid-content bg-purple">
              <span class="wrapper">

              </span>
			      </div>
			    </el-col>
			  	<el-col :span="12" :offset="12">
			      <div class="grid-content bg-purple-light pull-right">
			        <!-- page -->
			        <el-pagination
  @current-change="handleCurrentPageChange"
  :current-page="currentPage"
  layout="total, prev, pager, next, jumper"
  :total="total"
  :page-size="pageSize"
  ref="pagination"
  >
</el-pagination>
			        <!-- / page -->
			      </div>
			    </el-col>
			  </el-row>
			</div>

			<div class="dialogWrapper" v-show="show" style="display: none">
        <!-- 展示行信息 -->
        <el-dialog title="信息展示" :visible.sync="infoDialog">
  <el-row style="font-size:16px;padding:0 0 5px 30px;">
    <el-col :span="22">
      <a style="font-weight:bold;">物品名称：</a>{{infoData.name}}
    </el-col>
  </el-row>

  <el-row style="font-size:16px;padding:0 0 5px 30px;">
    <el-col :span="11">
      <a style="font-weight:bold;">物品单位：</a>{{infoData.unit}}
    </el-col>
    <el-col :span="11">
      <a style="font-weight:bold;">物品单价：</a>{{infoData.price}}
    </el-col>
  </el-row>

  <el-row style="font-size:16px;padding:0 0 5px 30px;">
    <el-col :span="11">
      <a style="font-weight:bold;">所属分类：</a>{{infoData.type}}
    </el-col>
    <el-col :span="11">
      <a style="font-weight:bold;">总价值：</a>{{infoData.total_value}}
    </el-col>
  </el-row>

  <el-row style="font-size:16px;padding:0 0 5px 30px;">
    <el-col :span="22">
      <a style="font-weight:bold;">物品规格：</a>{{infoData.spec}}
    </el-col>
  </el-row>

  <el-row style="font-size:16px;padding:0 0 5px 30px;">
    <el-col :span="11">
      <a style="font-weight:bold;">起始数量：</a>{{infoData.start_num}}
    </el-col>
    <el-col :span="11">
      <a style="font-weight:bold;">截止数量：</a>{{infoData.end_num}}
    </el-col>
  </el-row>

  <el-row style="font-size:16px;padding:0 0 5px 30px;">
    <el-col :span="11">
      <a style="font-weight:bold;">目前数量：</a>{{infoData.now_num}}
    </el-col>
    <el-col :span="11">
      <a style="font-weight:bold;">领用数：</a>{{infoData.use_num}}
    </el-col>
  </el-row>

  <el-row style="font-size:16px;padding:0 0 5px 30px;">
    <el-col :span="11">
      <a style="font-weight:bold;">报修数：</a>{{infoData.repair_num}}
    </el-col>
    <el-col :span="11">
      <a style="font-weight:bold;">报废数：</a>{{infoData.scrap_num}}
    </el-col>
  </el-row>

  <el-row style="font-size:16px;padding:0 0 5px 30px;">
    <el-col :span="22">
      <a style="font-weight:bold;">备注：</a>{{infoData.remark}}
    </el-col>
  </el-row>

  <div slot="footer" class="dialog-footer">
   <el-button type="primary" @click="infoDialog = false">知道了</el-button>
  </div>

</el-dialog>

        <!-- / 展示行信息 -->
			</div>
      <div style="margin:5px -10px 5px;" v-show="showTab">
        <el-row >
         <el-col :span="24">
            <el-tabs type="border-card">
              <el-tab-pane label="变更明细">
                <el-table :data="changeInfoData" empty-text="请点击物品显示变更信息" style="width: 100%"  @row-dblclick="showChangeInfo">
                  <el-table-column label="<?php echo L('INDEX');?>" type="index" width="65" >
                  </el-table-column>

                  <el-table-column  align="center" prop="op_user" label="操作人员">
                  </el-table-column>

                  <el-table-column  align="center" prop="name" label="品名" show-overflow-tooltip>
                  </el-table-column>

                  <el-table-column  align="center" prop="type" label="类别">
                  </el-table-column>

                  <el-table-column  align="center" prop="spec" label="规格"  show-overflow-tooltip>
                  </el-table-column>

                  <el-table-column  align="center" prop="unit" label="单位">
                  </el-table-column>

                  <el-table-column  align="center" prop="price" label="单价(元)">
                  </el-table-column>

                  <el-table-column  align="center" prop="num" label="数量">
                  </el-table-column>

                  <el-table-column  align="center" prop="sum" label="总价">
                  </el-table-column> 

                  <el-table-column  align="center" prop="user" label="领用人">
                  </el-table-column> 

                  <el-table-column  align="center" prop="use_time" label="领用日期" width="180px">
                  </el-table-column>

                  <el-table-column  align="center" prop="status" label="状态">
                  </el-table-column>

                  <el-table-column  align="center" prop="remark" label="备注" show-overflow-tooltip>
                  </el-table-column>

                </el-table>
              </el-tab-pane>
            </el-tabs>
         </el-col>
        </el-row>
      </div>

		</div>

	</div>

	<script src="/gaoa/Public/js/vue.min.js"></script>
  <script src="/gaoa/Public/js/element-ui--index.js"></script>
	<script src="/gaoa/Public/js/vue-resource.min.js"></script>

	<!-- vue 通用部分  -->
	<script src="/gaoa/Public/js/vueHooks.js"></script>
	<script src="/gaoa/Public/js/vueMethods.js"></script>
	<script src="/gaoa/Public/js/vueOption.js"></script>
	<script src="/gaoa/Public/js/vueCommonLogic.js?b=d"></script>
	<script>
		var page = {
			addFormUrl:"<?php echo U('add');?>",
			editFormUrl:"<?php echo U('edit');?>",
			listUrl:"<?php echo U('getList');?>",
			deleteUrl:"<?php echo U('delete');?>",
			pageSize:<?php echo ($pageSize); ?>
		}
		window.defaultOption = new VueOption();

		// setCommonLogin 还可以再细分
		setCommonLogic(window.defaultOption);


	</script>

	<!-- / vue 通用部分  -->


	<script>
		
		
	</script>


	
<script>
	window.defaultOption.setDatas({
    rowInfo:{},
    showTab:false,
  	multipleSelection:[],
    newMultipleSelection:[], 	
    dialogLabelWidth:"120px",
    infoDialog:false,
    infoData:{},
    dataList:[
      {name:"打印机",type:"耗材/文印设备",spec:"464 x 464 x 224mm",unit:"台",price:"3000",start_num:"10",end_num:"5",now_num:"7",total_value:"30000",use_num:"2",repair_num:"1",scrap_num:"0",remark:"一万个理由"},
      {name:"打印机",type:"耗材/文印设备",spec:"464 x 464 x 224mm",unit:"台",price:"3000",start_num:"10",end_num:"5",now_num:"7",total_value:"30000",use_num:"2",repair_num:"1",scrap_num:"0",remark:"一万个理由"},
      {name:"打印机",type:"耗材/文印设备",spec:"464 x 464 x 224mm",unit:"台",price:"3000",start_num:"10",end_num:"5",now_num:"7",total_value:"30000",use_num:"2",repair_num:"1",scrap_num:"0",remark:"一万个理由"},
      {name:"打印机",type:"耗材/文印设备",spec:"464 x 464 x 224mm",unit:"台",price:"3000",start_num:"10",end_num:"5",now_num:"7",total_value:"30000",use_num:"2",repair_num:"1",scrap_num:"0",remark:"一万个理由"},
      {name:"打印机",type:"耗材/文印设备",spec:"464 x 464 x 224mm",unit:"台",price:"3000",start_num:"10",end_num:"5",now_num:"7",total_value:"30000",use_num:"2",repair_num:"1",scrap_num:"0",remark:"一万个理由"},
      {name:"打印机",type:"耗材/文印设备",spec:"464 x 464 x 224mm",unit:"台",price:"3000",start_num:"10",end_num:"5",now_num:"7",total_value:"30000",use_num:"2",repair_num:"1",scrap_num:"0",remark:"一万个理由"},
      {name:"打印机",type:"耗材/文印设备",spec:"464 x 464 x 224mm",unit:"台",price:"3000",start_num:"10",end_num:"5",now_num:"7",total_value:"30000",use_num:"2",repair_num:"1",scrap_num:"0",remark:"一万个理由"},
      {name:"打印机",type:"耗材/文印设备",spec:"464 x 464 x 224mm",unit:"台",price:"3000",start_num:"10",end_num:"5",now_num:"7",total_value:"30000",use_num:"2",repair_num:"1",scrap_num:"0",remark:"一万个理由"},
      {name:"打印机",type:"耗材/文印设备",spec:"464 x 464 x 224mm",unit:"台",price:"3000",start_num:"10",end_num:"5",now_num:"7",total_value:"30000",use_num:"2",repair_num:"1",scrap_num:"0",remark:"一万个理由"},
    	{name:"打印机",type:"耗材/文印设备",spec:"464 x 464 x 224mm",unit:"台",price:"3000",start_num:"10",end_num:"5",now_num:"7",total_value:"30000",use_num:"2",repair_num:"1",scrap_num:"0",remark:"一万个理由"},
  	],
    changeInfoData:[],
    changeInfoDataBak:[
      {op_user:"人事A",name:"打印机",type:"耗材/文印设备",spec:"464 x 464 x 224mm",unit:"台",price:"3000",num:"2",sum:"6000",user:"大小A",use_time:"2017-08-01 12:12:12",status:"入库",remark:"不备注不备注不备注"},
      {op_user:"人事A",name:"打印机",type:"耗材/文印设备",spec:"464 x 464 x 224mm",unit:"台",price:"3000",num:"2",sum:"6000",user:"大小A",use_time:"2017-08-01 13:13:13",status:"领用",remark:"不备注不备注不备注"},
      {op_user:"人事A",name:"打印机",type:"耗材/文印设备",spec:"464 x 464 x 224mm",unit:"台",price:"3000",num:"2",sum:"6000",user:"大小A",use_time:"2017-08-01 14:14:14",status:"归还",remark:"不备注不备注不备注"},
      {op_user:"人事A",name:"打印机",type:"耗材/文印设备",spec:"464 x 464 x 224mm",unit:"台",price:"3000",num:"2",sum:"6000",user:"大小A",use_time:"2017-08-01 15:15:15",status:"保修",remark:"不备注不备注不备注"},
      {op_user:"人事A",name:"打印机",type:"耗材/文印设备",spec:"464 x 464 x 224mm",unit:"台",price:"3000",num:"2",sum:"6000",user:"大小A",use_time:"2017-08-01 16:16:16",status:"报废",remark:"不备注不备注不备注"},

    ],
    StyType:[
      {label:"耗材/文印设备",value:"1"},
      {label:"IT/数码/通讯",value:"2"},
      {label:"办公设备/电器",value:"3"},
      {label:"办公日用",value:"4"},
      {label:"食品/饮料",value:"5"},
      {label:"礼品/卡卷",value:"6"},
      {label:"文具/财务",value:"7"},
      {label:"纸张",value:"8"},
      {label:"测试",value:"9"},
    ],
    changeStatus:[
       
    ],
	}).setForm('search',{
    type:"",
    name:"",
    start:"",
    end:"",
	}).setMethod('startDateChange',function(v){
		this.searchForm.start = v;
	}).setMethod('endDateChange',function(v){
		this.searchForm.end = v;
	}).setMethod('handleChange',function(val){
    this.multipleSelection = [];
    this.multipleSelection = val;
  }).setMethod('showInfo',function(row, event){
    this.infoData = row;
    this.infoDialog = true;
    console.log(row);
  }).setMethod('showRowInfo',function(row, event, column){
    this.showTab = true;

    this.changeInfoData = this.changeInfoDataBak;

  }).setMethod('showChangeInfo',function(row, event){
    console.log(row);
  });
</script>

	<script>
	//改modal

		window.defaultVm = new Vue(window.defaultOption.getOption()).$mount('#app');
	</script>
</body>
</html>